<template>
  <div class="index">
    <base-header @coreSetting="coreSetting"></base-header>
    <div class="index_main">
      <!-- 左侧菜单栏 -->
      <left />
      <!-- 中控台 -->
      <div class="index_center"
           @click="cancelActive">
        <!-- 开发模式 -->
        <core v-if="coreMode == 'dev'"
              :style="{ transform: `scale(${scale},${scale})` }"
              class="core"
              ref="core" />
        <!-- 测试查看模式 -->
        <show-core v-if="coreMode == 'prod'"
                   class="mobile"></show-core>
      </div>

      <!-- 右侧菜单栏 -->
      <right @coreSetting="coreSetting" />
    </div>
  </div>
</template>

<script>
import { cancelHistory, unCancelHistory } from "@/store/plugins/cancelPlugins";
import history from "@/store/plugins/cancelPlugins/History";
import baseHeader from "./components/header.vue";
import core from "./center/core.vue";
import showCore from "./center/showCore.vue";
import left from "./left/index.vue";
import right from "./right/index.vue";
import { initMouse, uninitMouse, initKeyDown } from "@/utils/index";
export default {
  components: {
    baseHeader,
    left,
    core,
    right,
    showCore,
  },
  mounted () {
    this.$nextTick(() => {
      initMouse(this.core);
      initKeyDown(this.core);
    });
    let objectId = this.$route.params.objectId;
    this.$store.commit("core/set_objectId", objectId);
    this.$store
      .dispatch("core/getActivity", { id: objectId })
      .then(result => {
        this.$message.success(result);
        this.$store.commit("core/initCovName");
      })
      .catch(err => {
        this.$message.error(err);
      });
    let innerCenter = document.querySelector('.index_center');
    innerCenter.addEventListener('scroll', this.handleScroll, true);
  },

  data () {
    return {
      mode: "dev" // dev 为开发模式 prod 为线上测试模式
    };
  },
  computed: {
    scale () {
      return this.$store.state.setting.scale;
    },
    coreScale () {
      return Number((this.scale * 100).toFixed(1)) + "%";
    },
    core () {
      return this.$store.state.core;
    },
    coreMode () {
      return this.$store.state.setting.coreMode;
    }
  },
  methods: {
    // 点击屏幕外侧取消选中
    cancelActive (e) {
      if (e.target.getAttribute("class") == "index_center") {
        this.$store.commit("core/clear_template");
        this.$store.commit("setting/closeRightMenu");
      }
    },
    handleScroll (e) {
      this.$store.commit("setting/setScollTop", e.target.scrollTop);
    },
    init () {
      initMouse(this.core);
      initKeyDown(this.core);
      this.$store.commit("core/clear_template");
    },
    // 放大缩小
    coreSetting (type) {
      if (type == "cancel") {
        // 撤销
        // cancelHistory();
        history.replaceState();
        this.init();
      } else if (type == "uncancel") {
        // 反撤销
        // unCancelHistory();
        history.unReplaceState();
      }
    }
  },
  destroyed () {
    // 清空vuex
    this.$store.commit("core/destroyedTemplate");
    // 写在鼠标监听
    uninitMouse();
  }
};
</script>

<style lang="less" scoped>
.index {
  height: 100%;
  .index_main {
    height: 94%;
    display: flex;
    justify-content: space-between;

    .index_center {
      padding: 20px 0;
      position: relative;
      display: -webkit-box;
      flex: 1;
      flex-direction: column;
      align-items: center;
      overflow-x: hidden;
      overflow-y: scroll;
      background-color: #eee;

      .index_center_header {
        display: flex;
        justify-content: center;
        border: 1px solid #4190f7;
        border-radius: 6px;
        font-size: 10px;
        line-height: 20px;
        height: 26px;
        box-sizing: border-box;
        cursor: pointer;
        user-select: none;
        .active {
          color: white;
          background-color: #1890ff;
        }
        .unactive {
          background-color: white;
          color: #1890ff;
        }
        .header_dev {
          text-align: center;
          padding: 3px 5px;
          border-top-left-radius: 5px;
          border-bottom-left-radius: 5px;
        }
        .header_prod {
          text-align: center;
          padding: 3px 5px;
          border-top-right-radius: 5px;
          border-bottom-right-radius: 5px;
        }
      }
    }
  }
}
</style>

